@import "utils";

.social-login-button {
  padding: 1rem;
  @include media("<x-large") {
    padding: 0.75rem;
  }
  display: flex;
  border-radius: 2px;
  align-items: center;
  transition: all 0.15s ease-in;
  cursor: pointer;
  color: white;
  font-size: 1rem;
  @include media("<x-large") {
    font-size: 0.85rem;
  }
  svg {
    font-size: 2em;
  }
  .text {
    font-size: 1.15em;
    font-weight: 600;
    margin-left: 1rem;
    &:first-letter {
      text-transform: capitalize;
    }
    .login {
      font-weight: 400;
    }
  }
  &.github {
    border: 1px solid $oc-gray-4;
    background: $oc-gray-2;
    color: $oc-gray-9;
    @include hover() {
      background: $oc-gray-0;
    }
    &:active {
      background: $oc-gray-3;
    }
  }
  &.facebook {
    background: $oc-blue-8;
    border: 1px solid $oc-blue-9;
    @include hover() {
      background: $oc-blue-7;
    }
    &:active {
      background: $oc-blue-9;
    }
  }
  &.google {
    border: 1px solid darken($oc-red-8, 5%);
    background: $oc-red-9;
    @include hover() {
      background: $oc-red-8;
    }
    &:active {
      background: $oc-red-9;
    }
  }

  & + & {
    margin-top: 1.5rem;
  }
}
